<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="uni-form-item uni-column">
				<view class="title">名称</view>
				<input v-model="username" type="text" placeholder="请输入名称" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">性别</view>
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="item.value === gender" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">电话</view>
				<input v-model="mobile" type="text" placeholder="请输入电话" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">邮箱</view>
				<input v-model="email" type="text" placeholder="请输入邮箱" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">头像</view>
				<image class="avatar" :src="avatar" mode="" @click="upFile"></image>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">Submit</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				gender: 0,
				mobile: '15147661602',
				email: 'test@qq.com',
				avatar: '../../static/logo.png',
				id: '',
				items: [{
						value: 0,
						name: '未知'
					},
					{
						value: 1,
						name: '男',
					},
					{
						value: 2,
						name: '女'
					},
				],
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.id && this.findById()
		},
		methods: {
			findById() {
				const that = this
				uniCloud.callFunction({
					name: "uploadFile",
					data: {
						funName: 'findById',
						id: that.id
					},
					success: (res) => {
						console.log(res);
						that.username = res.result.username
						that.gender = res.result.gender
						that.mobile = res.result.mobile
						that.email = res.result.email
						that.avatar = res.result.avatar
					},
					fail: (f) => {
						console.error(f);
					}
				})
			},
			formSubmit() {
				const postData = {
					username: this.username,
					gender: this.gender,
					mobile: this.mobile,
					email: this.email,
					avatar: this.avatar,
					id: this.id
				}
				if (this.username === '') {
					uni.showToast({
						title: '姓名为空',
						icon: 'error'
					})
					return 
				}
				if (this.id) {
					uniCloud.callFunction({
						name: "uploadFile",
						data: {
							funName: 'edit',
							...postData
						},
						success: (res) => {
							uni.showToast({
								title: res.result.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)

						},
						fail: (f) => {
							console.error(f);
						}
					})
				} else {
					uniCloud.callFunction({
						name: "uploadFile",
						data: {
							funName: 'add',
							...postData
						},
						success: (res) => {
							uni.showToast({
								title: res.result.msg
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)

						},
						fail: (f) => {
							console.error(f);
						}
					})
				}
			},
			upFile() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						uniCloud.uploadFile({
							cloudPath: Date.now() + '.png',
							filePath: res.tempFilePaths[0],
							success: (res) => {
								this.avatar = res.fileID
								uni.hideLoading()
							}
						})
					},
					fail(err) {
						console.error(err)
					}
				})
			},
			radioChange(e) {
				this.gender = e.target.value
			},
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.avatar {
		width: 100px;
		height: 100px;
	}
</style>
